<template>
	<view>
		<u-navbar title="商品详情" back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" :background="navbarBackground"></u-navbar>
		<view class="main">
			<scroll-view scroll-y>
				<view class="banner"><u-swiper height="400" :list="bannerList" border-radius="0" :effect3d="false" mode="dot"></u-swiper></view>
				<!-- 商品信息 -->
				<view class="info">
					<text class="title">{{ goodsInfo.title }}</text>
					<view class="price">
						<text class="on-price">
							<text class="symbol">￥</text>
							{{ goodsInfo.present_price }}
						</text>
						<text class="un-price">{{ '￥' + goodsInfo.origin_price }}</text>
					</view>
					<view class="deposit">
						<text>{{ '定金￥' + goodsInfo.deposit_price }}</text>
					</view>
					<view class="desc">
						<view class="desc-item">
							<text class="desc-item-title">有效期</text>
							<text class="desc-item-sub">{{ goodsInfo.term }}</text>
						</view>
						<view class="desc-item">
							<text class="desc-item-title">售后服务</text>
							<text class="desc-item-sub">{{ goodsInfo.service }}</text>
						</view>
						<view class="desc-item">
							<text class="desc-item-title">使用说明</text>
							<text class="desc-item-sub">{{ goodsInfo.explain }}</text>
						</view>
					</view>
				</view>
				<!-- 核销流程 -->
				<view class="write-off">
					<view class="write-off-title"><text>核销流程</text></view>
					<view class="grid">
						<view class="grid-item">
							<u-image width="100" height="100" :src="require('../../../static/image/hx.png')"></u-image>
							<text>线上购买定金商品</text>
						</view>
						<view class="grid-item">
							<u-image width="100" height="100" :src="require('../../../static/image/goods.png')"></u-image>
							<text>线下门店核销</text>
						</view>
						<view class="grid-item">
							<u-image width="100" height="100" :src="require('../../../static/image/zk.png')"></u-image>
							<text>线下购物享折扣</text>
						</view>
					</view>
					<view class="grid-title">
						<text>付定金后到店消费</text>
						<text>{{ '立减' + goodsInfo.deduction_price }}</text>
					</view>
				</view>
				<!-- 线下门店 -->
				<view class="store">
					<view class="store-title"><text>线下门店</text></view>
					<view class="store-info">
						<view class="store-info-item">
							<text class="store-info-item-title">门店地址</text>
							<text class="store-info-item-sub">{{ goodsInfo.store_address }}</text>
						</view>
						<view class="store-info-item">
							<text class="store-info-item-title">商家电话</text>
							<text class="store-info-item-sub">{{ goodsInfo.store_mobile }}</text>
						</view>
					</view>
				</view>
				<!-- 商品简介 -->
				<view class="detail">
					<view class="detail-title"><text>商品详情</text></view>
					<view class="detail-content"><u-parse :html="goodsInfo.content"></u-parse></view>
				</view>
				<view class="recommend">
					<view class="recommend-title"><text>商品推荐</text></view>
					<view class="list" v-if="recommend.length !== 0">
						<view class="item" v-for="(item, index) in recommend" :key="index" @click="handleGetDetail(item.id)">
							<u-image width="40vw" height="180" border-radius="10" :src="item.cover"></u-image>
							<view class="card-right">
								<text class="name">{{ item.title }}</text>
								<text class="un-price">{{ '￥' + item.origin_price }}</text>
								<view class="on-price">
									<view class="price">
										<text class="symbol">￥</text>
										<text>{{ item.present_price }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="fixed">
					<view class="fixed-left">
						<view class="fixed-item" @tap="showPopup = true">
							<uni-icons size="22" type="chat" />
							<text>客服</text>
						</view>
						<view class="fixed-item" @tap="handleToShop">
							<uni-icons size="22" type="shop" />
							<text>店铺</text>
						</view>
						<view class="fixed-item" @tap="handleToCart">
							<uni-icons size="22" type="cart" />
							<text>购物车</text>
						</view>
					</view>
					<view class="fixed-right">
						<text class="btn-left" @tap="handleShowAddCart(1)">加入购物车</text>
						<text class="btn-right" @tap="handleShowAddCart(2)">立付定金</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 加购物车 -->
		<u-popup v-model="showAdd" mode="bottom" :closeable="true" border-radius="20">
			<view class="add">
				<view class="item-card">
					<u-image width="35vw" height="200" border-radius="10" :src="goodsInfo.cover" @click="handleDetail(it.id)"></u-image>
					<view class="card-right">
						<text class="name" @click="handleDetail(goodsInfo.id)">{{ goodsInfo.title }}</text>
						<view class="un-price">
							<view class="price">
								<text class="symbol">￥</text>
								<text>{{ goodsInfo.present_price }}</text>
							</view>
							<text class="price-un">{{ '￥' + goodsInfo.origin_price }}</text>
						</view>
						<view class="on-price">
							<view class="deposit">
								定金：
								<text class="deposit-price">{{ goodsInfo.deposit_price }}</text>
							</view>
							<text class="stock">{{ '库存：' + goodsInfo.stock }}</text>
						</view>
					</view>
				</view>
				<view class="count">
					<text>数量</text>
					<view><u-number-box :min="1" v-model="count"></u-number-box></view>
				</view>
				<view class="add-btn">
					<u-button shape="circle" :custom-style="customStyle" :ripple="true" ripple-bg-color="#8EB7FA" @click="handleAddCart(goodsInfo.id)">{{ currentClickBtn }}</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 客服弹窗 -->
		<u-popup v-model="showPopup" mode="center" border-radius="15">
			<view class="popup">
				<text class="popup-title">客服咨询</text>
				<text class="popup-mobile">咨询热线：{{ customer.tel_number }}</text>
				<u-image width="220" height="220" :src="customer.kefu_qr"></u-image>
				<text class="popup-sub">长按试别二维码保存图片</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
import uniIcons from '../../../components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniIcons
	},
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			customStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			},
			bannerList: [],
			goodsInfo: {},
			recommend: [],
			showPopup: false,
			showAdd: false,
			count: 1,
			currentClickBtn: '',
			customer: {}
		};
	},
	onLoad(option) {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		if (option.id) {
			this.$tkRequest('/api/Common/customer').then(res => {
				this.customer = res.data;
			});
			this.handleGetDetail(option.id);
			this.handleGetRecommend(option.id);
		}
	},
	watch: {
		showAdd: function() {
			if (!this.showAdd) {
				// 初始化数量
				this.count = 1;
			}
		}
	},
	methods: {
		// 获取详情
		handleGetDetail(id) {
			uni.showLoading({
				title: '加载中...'
			}),
				this.$baseRequest('/api/goods/info', {
					id: id
				}).then(res => {
					uni.hideLoading();
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0
					});
					this.goodsInfo = res.data;
					this.bannerList = this.goodsInfo.images.map(item => {
						return {
							image: item
						};
					});
				});
		},
		handleGetRecommend(id) {
			this.$baseRequest('/api/goods/recommend', {
				id: id
			}).then(res => {
				this.recommend = res.data;
			});
		},
		handleAddCart(id) {
			uni.showLoading({
				title: '加载中...'
			});
			if (this.currentClickBtn == '加入购物车') {
				// 加入购物车
				this.$tkRequest('/api/ShopCar/add', {
					goods_id: id,
					share_num: this.count
				}).then(res => {
					uni.showToast({
						title: '已添加到购物车',
						success: function() {
							uni.showTabBarRedDot({ index: 2 });
						}
					});
					setTimeout(() => {
						this.showAdd = false;
					}, 800);
				});
			} else {
				this.$tkRequest('/api/ShopCar/add', {
					goods_id: id,
					share_num: this.count
				}).then(res => {
					this.showAdd = false;
					this.$tkRequest('/api/Address/getList').then(res => {
						let list = res.data;
						uni.setStorageSync('chooseListInfo', JSON.stringify(list));
						if (list.length > 0) {
							uni.navigateTo({
								url: `../../cart/order/order?id=${this.goodsInfo.id}`
							});
						} else {
							uni.showModal({
								title: '提示',
								content: '您还未添加收货地址，是否去添加？',
								confirmColor: '#295FB7',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '../../mine/shippingAddress/newAddress/newAddress'
										});
									}
								}
							});
						}
					});
				});
			}
		},
		handleShowAddCart(index) {
			this.showAdd = true;
			index == 1 ? (this.currentClickBtn = '加入购物车') : (this.currentClickBtn = '立付定金');
		},
		handleToShop() {
			uni.switchTab({
				url: '../shop'
			});
		},
		handleToCart() {
			uni.switchTab({
				url: '../../cart/cart'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	scroll-view {
		min-height: 92vh;
	}

	.banner {
		width: 100vw;
		height: 400rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
		padding: 0 $uni-spacing-row-lg;
		background-color: #fff;

		.title {
			padding: $uni-spacing-col-lg 0;
			font-size: 1rem;
			font-weight: bold;
		}

		.price {
			display: flex;
			align-items: center;

			.on-price {
				font-size: 14pt;
				color: #eab952;

				.symbol {
					font-size: 10pt;
				}
			}

			.un-price {
				font-size: 10pt;
				text-decoration: line-through;
				color: #999;
				padding: 0 $uni-spacing-row-sm;
			}
		}

		.deposit {
			padding: $uni-spacing-col-lg 0;

			text {
				padding: $uni-spacing-col-sm $uni-spacing-row-lg;
				background-color: #d8dfef;
				border-radius: 10rpx;
				color: #284678;
			}
		}

		.desc {
			padding: $uni-spacing-col-lg 0;

			.desc-item {
				display: flex;
				align-items: center;
				padding: $uni-spacing-col-base 0;

				.desc-item-title {
					width: 20vw;
					color: #999;
				}

				.desc-item-sub {
					flex: 1;
				}
			}
		}
	}

	.write-off {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin-top: $uni-spacing-col-base;
		background-color: #fff;

		.write-off-title {
			font-size: 1rem;
			color: #284678;
		}

		.grid {
			padding: 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.grid-item {
				position: relative;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					padding-top: $uni-spacing-col-lg;
					font-size: 10pt;
					color: #333;
				}
			}

			.grid-item:first-child {
				&::before {
					content: '';
					position: absolute;
					right: -20%;
					top: 30%;
					width: 40%;
					height: 0;
					/* #ifdef MP-WEIXIN */
					height: 1rpx;
					/* #endif */
					border-top: 1rpx solid #eee;
					z-index: 1;
				}
			}

			.grid-item:last-child {
				&::before {
					content: '';
					position: absolute;
					left: -20%;
					top: 30%;
					width: 40%;
					height: 0;
					/* #ifdef MP-WEIXIN */
					height: 1rpx;
					/* #endif */
					border-top: 1rpx solid #eee;
					z-index: 1;
				}
			}
		}

		.grid-title {
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fef7ef;
			color: #e8af3b;
		}
	}
	.store {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin-top: $uni-spacing-col-base;
		background-color: #fff;

		.store-title {
			font-size: 1rem;
			color: #284678;
		}

		.store-info {
			padding: $uni-spacing-col-lg 0;

			.store-info-item {
				display: flex;
				align-items: center;
				padding: $uni-spacing-col-base 0;

				.store-info-item-title {
					width: 20vw;
					color: #999;
				}

				.store-info-item-sub {
					flex: 1;
				}
			}
		}
	}

	.detail {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin: $uni-spacing-col-base 0;
		background-color: #fff;

		.detail-title {
			font-size: 1rem;
			color: #284678;
			padding-bottom: $uni-spacing-col-base;
		}

		.detail-content {
			padding: $uni-spacing-col-lg 0;
			font-size: 11pt;
			/* #ifdef APP-PLUS */
			font-size: 12pt;
			/* #endif */
		}
	}

	.recommend {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg 125rpx $uni-spacing-row-lg;
		background-color: #fff;

		.recommend-title {
			font-size: 1rem;
			color: #284678;
			padding-bottom: $uni-spacing-col-lg;
		}

		.item {
			display: flex;
			align-items: center;
			padding: $uni-spacing-col-base 0;

			.card-right {
				flex: 1;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: $uni-spacing-row-sm;
				overflow: hidden;

				.name {
					font-size: 1rem;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: bold;
				}

				.un-price {
					font-size: 9pt;
					text-decoration: line-through;
					color: #999;
				}

				.on-price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: #eab952;
						font-size: 1rem;

						.symbol {
							font-size: 10pt;
						}
					}
				}
			}
		}
	}

	.fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		padding: $uni-spacing-col-base $uni-spacing-row-lg;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.fixed-left {
			width: 45%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.fixed-item {
				display: flex;
				flex-direction: column;
				font-size: 10pt;
				align-items: center;
				/* #ifdef APP-PLUS */
				font-size: 12pt;
				/* #endif */
			}
		}

		.fixed-right {
			width: 55%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			text {
				padding: $uni-spacing-col-base $uni-spacing-row-base;
				font-size: 10pt;
				/* #ifdef APP-PLUS */
				padding: $uni-spacing-col-base $uni-spacing-row-lg;
				font-size: 11pt;
				/* #endif */
			}

			.btn-left {
				background-color: #3a64b5;
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				border: 1rpx solid #3a64b5;
				color: #f1f1f1;

				&:hover,
				&:focus {
					box-shadow: 0 5rpx 15rpx #eee;
				}
			}

			.btn-right {
				border: 1rpx solid #3a64b5;
				border-top-right-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				color: #3a64b5;
			}
		}
	}
}

.add {
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;

	.count {
		padding: $uni-spacing-col-lg 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12pt;
	}

	.add-btn {
		padding: $uni-spacing-col-base 0;
	}

	.item-card {
		display: flex;
		align-items: center;
		padding: 40rpx 0 $uni-spacing-col-lg 0;

		.card-right {
			flex: 1;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: $uni-spacing-row-sm;
			overflow: hidden;

			.name {
				font-size: 1rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: bold;
			}

			.un-price {
				display: flex;
				align-items: center;

				.price {
					font-size: 1rem;

					.symbol {
						font-size: 10pt;
					}
				}

				.price-un {
					font-size: 9pt;
					text-decoration: line-through;
					color: #999;
					padding-left: $uni-spacing-row-sm;
				}
			}

			.on-price {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.deposit {
					color: #eab952;

					.deposit-price {
						font-size: 1.1rem;
					}
				}

				.stock {
					font-size: 10pt;
					color: #999;
				}
			}
		}
	}
}

.popup {
	width: 80vw;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	background-image: url();
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #f1f1f1;

	.popup-title {
		padding: $uni-spacing-col-lg 0;
		font-family: '微软雅黑';
		letter-spacing: 4rpx;
		font-size: 12pt;
	}

	.popup-mobile {
		padding-bottom: $uni-spacing-col-lg;
		font-size: 11pt;
	}

	.popup-sub {
		padding: $uni-spacing-col-lg;
	}
}
</style>
